<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <!-- 头部左侧内容 -->
            <el-tabs v-model="activeName" class="tabs">
                <el-tab-pane label="销售额" name="sale"></el-tab-pane>
                <el-tab-pane label="访问量" name="visit"></el-tab-pane>
            </el-tabs>
            <!-- 头部右侧内容 -->
            <div class="right">
                <span @click="setDate">今日</span>
                <span>本周</span>
                <span>本月</span>
                <span>本年</span>
                <!-- 日历组件 -->
                <el-date-picker v-model="dateValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
                    :default-time="['12:00:00']" class="date">
                </el-date-picker>
            </div>
        </div>
        <!-- 中间内容 -->
        <div>
            <el-row :gutter="10">
                <el-col :span="18">
                    <!-- 容器 -->
                    <div class="charts" ref="charts"></div>
                </el-col>
                <el-col :span="6" class="right">
                    <div>
                        <h3>门店{{ title }}排名</h3>
                        <ul>
                            <li>
                                <span class="rindex">0</span>
                                <span>肯德基</span>
                                <span class="rvalue">123456</span>
                            </li>
                            <li>
                                <span class="rindex">1</span>
                                <span>肯德基</span>
                                <span class="rvalue">123456</span>
                            </li>
                            <li>
                                <span class="rindex">2</span>
                                <span>肯德基</span>
                                <span class="rvalue">123456</span>
                            </li>
                            <li>
                                <span>3</span>
                                <span>肯德基</span>
                                <span class="rvalue">123456</span>
                            </li>
                            <li>
                                <span>4</span>
                                <span>肯德基</span>
                                <span class="rvalue">123456</span>
                            </li>
                            <li>
                                <span>5</span>
                                <span>肯德基</span>
                                <span class="rvalue">123456</span>
                            </li>
                            <li>
                                <span>6</span>
                                <span>肯德基</span>
                                <span class="rvalue">123456</span>
                            </li>
                            <li>
                                <span>7</span>
                                <span>肯德基</span>
                                <span class="rvalue">123456</span>
                            </li>
                        </ul>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
// 引入dayjs
import dayjs from 'dayjs'
export default {
    name: "Sale",
    data() {
        return {
            activeName: "sale",
            dateValue: '',
            // 方便监听
            MyEcharts: null
        }
    },
    mounted() {
        // 初始化echarts实例
        this.MyEcharts = echarts.init(this.$refs.charts)
        // 配置数据
        this.MyEcharts.setOption({
            title: {
                text: this.title
            },
            xAxis: {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    type: 'bar',
                    data: [10, 52, 200, 334, 390, 330, 220, 110, 98, 167, 123, 44],
                }
            ],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '5%',
                containLabel: true
            }
        })
    },
    // 计算属性
    computed: {
        title() {
            return this.activeName == 'sale' ? '销售额' : '访问量'
        }
    },
    // 监听属性
    watch: {
        title() {
            // 重新渲染echarts图表
            // 没替换的会使用原来的
            this.MyEcharts.setOption({
                title: {
                    text: this.title
                }
            })
        }
    },
    // 设置方法
    methods: {
        // 本天(其他略)
        setDate() {
            const day = dayjs().format('YYYY-MM-DD')
            this.dateValue = [day, day]
        }
    }
}
</script>

<style scoped>
.box-card {
    margin: 10px 0;
}

.clearfix {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.tabs {
    width: 100%;
}

.right {
    position: absolute;
    right: 0;
}

.date {
    width: 240px;
    margin: 0 10px;
}

.right span {
    margin: 0 10px;
}

/* 设置charts的宽高 */
.charts {
    width: 100%;
    height: 300px;
}

ul {
    list-style: none;
    width: 100%;
    height: 300px;
}

ul li {
    height: 8%;
    margin: 10px 0;
}

.rindex {
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: black;
    color: white;
    text-align: center;
}

.rvalue {
    float: right
}
</style>